<template>
  <div class="Tabbar">
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="shouye">
        <img
          v-if="selected == 'shouye'"
          slot="icon"
          src="../../public/img/shouye_xz.png"
          alt=""
        />
        <img v-else slot="icon" src="../../public/img/shouye.png" alt="" />
        首页
      </mt-tab-item>
      <mt-tab-item id="zhaofang">
        <img
          v-if="selected == 'zhaofang'"
          slot="icon"
          src="../../public/img/zhaofang_xz.png"
          alt=""
        />
        <img v-else slot="icon" src="../../public/img/zhaofang.png" alt="" />
        找房
      </mt-tab-item>
      <mt-tab-item id="shenghuo">
        <img
          v-if="selected == 'shenghuo'"
          slot="icon"
          src="../../public/img/shenghuo_xz.png"
          alt=""
        />
        <img v-else slot="icon" src="../../public/img/shenghuo.png" alt="" />
        泊有生活
      </mt-tab-item>
      <mt-tab-item id="me">
        <img
          v-if="selected == 'me'"
          slot="icon"
          src="../../public/img/wode_xz.png"
          alt=""
        />
        <img v-else slot="icon" src="../../public/img/wode.png" alt="" />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: this.nav
    }
  },
  props:{
    nav:String,
    requrired:true
  },
  watch: {
    selected(newval) {
      console.log(2)
      if (newval == "shouye") {
        this.selected = "showye"
        this.$router.push("/")
      } else if (newval == "zhaofang") {
        this.selected = "zhaofang"
        this.$router.push("/fujing") // 需要新建.vue
      } else if (newval == "shenghuo") {
         this.selected = "shenghuo"
        this.$router.push("/life") // 需要新建.vue
      } else if (newval == "me") {
        console.log(1)
        this.$router.push("/my") // 需要新建.vue
         this.selected = "me"
        
      }
    }
  }
};
</script>

<style scoped>
.Tabbar {
  color: black;
}
</style>

